<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 800px;
        margin: 0 auto;
    }
    .clearfix::after{
        display: table;
        content: "";
        clear: both;
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .banner{
        
    }
    .contain{
        height: 401px;
        width: 32%;
        background: url("img/1.bmp") no-repeat 80px 250px ;
        background-size: 60%;
        border: 1px solid  #CFCFCF  ;
    }
    .contain:hover{
        transform: scale(0.9);
    }
    .contain-a{
        height: 200px;
        width: 32%;
        background: url("img/2.bmp") no-repeat 125px 56px;
        background-size: 50%;
        border-top: 1px solid #CFCFCF  ;

    }
    .contain-a:hover{
        transform: scale(0.9);
    }
    .contain-b{
        height: 200px;
        width: 32%;
        background: url("img/3.bmp") no-repeat  125px 56px;;
        background-size: 50%;
        border-top: 1px solid  #CFCFCF  ;
        border-left: 1px solid  #CFCFCF  ;
        border-right: 1px solid  #CFCFCF  ;
 
    }
    .contain-b:hover{
        transform: scale(0.9);
    }
    .contain-c{
        height: 200px;
        width: 32%;
        background: url("img/4.bmp") no-repeat  125px 56px;;
        background-size: 50%;
        border-bottom: 1px solid  #CFCFCF  ;
        border-top: 1px solid  #CFCFCF  ;
    }
    .contain-c:hover{
        transform: scale(0.9);
    }
    .contain-d{
        height: 200px;
        width: 32%;
        background: url("img/5.bmp") no-repeat  125px 56px; ;
        background-size: 40%;
        border: 1px solid  #CFCFCF  ;

    }
    .contain-d:hover{
        transform: scale(0.9);
    }
    .title{
        padding: 25px;
        box-sizing: border-box;
        font-family: 隶书;
        font-size: 20px;
        font-weight: bold;
    }
    .title_a{
        padding-left:25px;
        box-sizing: border-box;
        font-family: 宋体;
    }
</style>
<body>
    <a href="title.html">作业一</a>
    <a href="home.html">作业二</a>
    <a href="test.html">作业三</a>
    <a href="demo.html">作业四</a>
    <div class="box">
        <div class="banner clearfix">
            <div class="contain fl">
                <div class="title">
                    超级信用卡
                </div>
                <div class="title_a">
                    线上线下课累计彩贝积分
                </div>
            </div>
            <div class="contain-a fl">
                <div class="title">
                    彩贝抢霸
                </div>
                <div class="title_a">
                    每天10点更新
                </div>
            </div>
            <div class="contain-b fl">
                <div class="title">
                    热门优惠劵
                </div>
                <div class="title_a">
                    全场免费领取
                </div>
            </div>
            <div class="contain-c fl">
                <div class="title">
                    促销活动
                </div>
                <div class="title_a">
                    汇集全网优惠
                </div>
            </div>
            <div class="contain-d fl">
                <div class="title">
                    精挑细选
                </div>
                <div class="title_a">
                    给你最好的选择
                </div>
            </div>
        </div>
    </div>
</body>
</html>